<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>[|.pageTitle|]</title>
    [|if .zTree|]
    <link rel="stylesheet" href="/static/zTree3/css/demo.css?t=5" type="text/css">
    <link rel="stylesheet" href="/static/zTree3/css/zTreeStyle/zTreeStyle.css" type="text/css"> [|end|]
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/main.css">
    <script src="/static/layui/layui.js?s=36"></script>
    <script src="/static/js/main.js?s=2124"></script>
    <script src="/static/js/echarts.js"></script>
</head>

<form>
    <div>
        <div class="layui-btn-group">
            <button lay-filter="maxBtn" id="maxBtn" class="layui-btn" lay-submit="" style="background-color:rgb(36, 131, 255)">最高在线统计</button>
            <button lay-filter="perDayBtn" id="perDayBtn" class="layui-btn" lay-submit="">日平均在线统计</button>
            <button lay-filter="perMouBtn" id="perMouBtn" class="layui-btn" lay-submit="">月平均在线统计</button>
        </div>
    </div>
    <br>
    <label id="totalamount11" style="color:red; ">注：当时间大于7天，描点值为每天最高；大于1天小于7天，描点值为半小时最高值；小于1天，描点值为每5分钟最高值，虚线为所有描点平均值</label>
    <div class="layui-input-inline">
        <div class="layui-inline"><label class="layui-form-label">游戏平台:</label></div>
        <select name="platform" id="platform" size="1" style="width: 100px;height: 37px " lay-verify="">
                   <option value="1 " selected="0 ">请选择</option>
                   <option value="1 ">IOS</option>
                   <option value="2 ">安卓</option>
                   <option value="3 ">PC</option>
        </select>
        <div class="layui-inline"><label class="layui-form-label ">时间范围:</label></div>

        <div class="layui-input-inline" style="width:180px;">
            <input type="text" name="date1" id="date1" lay-verify="date" placeholder="yyyy-MM-dd HH" autocomplete="off" class="layui-input" value="">
        </div>
        <label>-</label>
        <div class="layui-input-inline" style="width:180px; ">
            <input type="text" name="date2" id="date2" lay-verify="date" placeholder="yyyy-MM-dd HH" autocomplete="off" class="layui-input" value="">
        </div>

        <div class="layui-inline">
            <button class="layui-btn layui-btn-normal" id="queryBtn" lay-submit="" lay-filter="queryBtn">查询</button>
        </div>

    </div>

    <div id="main" style="width:1700px;height:400px; "></div>

    <hr class="layui-bg-gray">
    <div class="layui-inline">

        <p>
            &nbsp&nbsp&nbsp&nbsp&nbsp
            <label id="" style="color:rgb(0, 0, 0); ">游戏平台当前在线人数:</label>
            <label id="totalamount" style="color:red; ">666</label>
            <label id="" style="color:rgb(0, 0, 0); ">人（即时数据）</label>
        </p>
    </div>
    <div class="layui-inline">
        <button class="layui-btn layui-btn-normal" id="updateBtn" lay-submit="" lay-filter="updateBtn">立即刷新</button>
    </div>
</form>
<br>
<blockquote class="layui-elem-quote layui-quote-nm">
    <div id="xxx" style="Width:100%;padding-left:50px"></div>
</blockquote>
<br><br><br>

<br><br>

<script type="text/html " id="barDemo ">

</script>

<script>
    var $;
    var dataChart = [
        ["123", 12],
        ["123", 123],
        ["123", 1234],
        ["123", 1235]
    ];
    var btnType = 1;
    var gameInfo = new Map();
    layui.use(['table', 'form', 'layedit', 'laydate', 'jquery', 'element'], function() {
        var form = layui.form,
            layer = layui.layer,
            layedit = layui.layedit,
            laydate = layui.laydate;
        $ = layui.jquery
        var element = layui.element;
        table = layui.table;

        //填写默认时间
        Date.prototype.Format = function(fmt) {
            var o = {
                "M+": this.getMonth() + 1, //月份 
                "d+": this.getDate(), //日 
                "h+": this.getHours(), //小时 
                "m+": this.getMinutes(), //分 
                "s+": this.getSeconds(), //秒 
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
                "S": this.getMilliseconds() //毫秒 
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }

        var date = new Date();
        var time1 = Date.parse(new Date()) / 1000; //获取当前秒数()
        var time2 = time1 + (24 * 3600);

        var unixTimestamp = new Date(time1 * 1000).Format("yyyy-MM-dd");
        document.getElementById('date1').value = unixTimestamp + " 00"

        var unixTimestamp = new Date(time2 * 1000).Format("yyyy-MM-dd");
        document.getElementById('date2').value = unixTimestamp + " 00"

        //日期
        laydate.render({
            elem: '#date1',
            type: 'datetime',
            format: 'yyyy-MM-dd HH'
        });

        laydate.render({
            elem: '#date2',
            type: 'datetime',
            format: 'yyyy-MM-dd HH'
        });

        function setBtnColor(btnID) {
            var btn = document.getElementById('maxBtn')
            btn.style.backgroundColor = "rgb(0,150,131)"
            var btn = document.getElementById('perDayBtn')
            btn.style.backgroundColor = "rgb(0,150,131)"
            var btn = document.getElementById('perMouBtn')
            btn.style.backgroundColor = "rgb(0,150,131)"
            var btn = document.getElementById(btnID)
            btn.style.backgroundColor = "rgb(36,131,255)"

        }

        //监听提交
        form.on('submit(maxBtn)', function(data) {
            setBtnColor("maxBtn");
            btnType = 1;
            return requestChartDate();

        });

        //监听提交
        form.on('submit(perDayBtn)', function(data) {
            setBtnColor("perDayBtn");
            btnType = 2;
            return requestChartDate();
        });

        //监听提交
        form.on('submit(perMouBtn)', function(data) {
            setBtnColor("perMouBtn");
            btnType = 3;
            return requestChartDate();
        });
        //监听提交
        form.on('submit(queryBtn)', function(data) {
            //setBtnColor("perMouBtn");
            //btnType = 3;
            var date1 = document.getElementById('date1').value;
            var date2 = document.getElementById('date2').value;
            if (CheckTimeRange(date1 + ':00:00',date2+':00:00' ,365))
            {
                return requestChartDate();
            }

            return false;
           
        });
        //监听提交
        form.on('submit(updateBtn)', function(data) {
            //setBtnColor("perMouBtn");
            //btnType = 3;
            //return requestChartDate();
            return requestOnlineCurData();


        });

        requestGameInfoDate();
        requestChartDate();
    });



    // 请求图表数据
    function requestChartDate() {
        var form_data = $("form").serialize();
        form_data = form_data + "&btnType=" + btnType;
        //layer.msg(JSON.stringify(form_data))

        $.post('[|urlfor "ChartDatasController.UserOnlineTable"|]', form_data, function(out) {
            if (out.code == 0) {
                //alert(JSON.stringify(out.data))
                dataChart = [];
                $.each(out.data, function(index, item) {

                    var spDate = item.Time1.split(" ");
                    var title = "title";
                    if (spDate.length >= 2) {
                        title = spDate[1];
                    } else {
                        title = spDate[0];
                    }
                    dataChart[index] = [title, parseInt(item.Count1)];

                });

                updateChart();
            } else {
                alert(JSON.stringify(out.msg))
            }


        }, "json");


        return false;

    }

    // 请求游戏数据
    function requestGameInfoDate() {
        var form_data = $("form").serialize();

        //layer.msg(JSON.stringify(form_data))

        $.post('[|urlfor "ChartDatasController.GameInfoList"|]', form_data, function(out) {
            if (out.code == 0) {
                //alert(JSON.stringify(out.data))
                $.each(out.data, function(index, item) {

                    var game = new Map();
                    game["gameName"] = item.GameName
                    game[item.RoomID1] = item.RoomName1;
                    game[item.RoomID2] = item.RoomName2;
                    game[item.RoomID3] = item.RoomName3;
                    game[item.RoomID4] = item.RoomName4;
                    game[item.RoomID5] = item.RoomName5;
                    gameInfo[item.KindID] = game;
                });


                requestOnlineCurData();

            } else {
                //alert(JSON.stringify(out.msg))
            }


        }, "json");


        return false;




    }

    //------------
    //requestChartDate();
    //requestOnlineCurData()
    //请求当前数据
    function requestOnlineCurData() {
        var form_data = $("form").serialize();
        //layer.msg(JSON.stringify(form_data))
        $.post('[|urlfor "ChartDatasController.UserOnlineCurCount"|]', form_data, function(out) {
            if (out.code == 0) {

                var total = 0;
                document.getElementById("xxx").innerHTML = "";

                $.each(out.data, function(index, item) {
                    total = total + item.NUM;

                    var kind = item.KINDID;
                    var roomid = item.ROOMID;
                    var num = item.NUM;

                    var game = gameInfo[kind]

                    if (game != null) {

                        if (game.gameName != null && game.gameName != '') {
                            kind = game.gameName + "(" + kind + ")";

                        } else {
                            kind = "游戏" + "(" + kind + ")";
                        }

                        if (game[roomid] != null && game[roomid] != '') {
                            roomid = game[roomid] + "(" + roomid + ")";
                        } else {
                            roomid = "房间" + "(" + roomid + ")";
                        }

                    } else {
                        kind = "游戏" + "(" + kind + ")";
                        roomid = "房间" + "(" + roomid + ")";
                    }



                    var nameID = "kind" + kind;


                    var labelO = document.getElementById(nameID);

                    if (labelO == null) {
                        var para = document.createElement("p");
                        para.id = "p" + nameID;
                        // para.align = "middle"

                        var node = document.createElement("label")
                        node.id = nameID;
                        node.innerHTML = "" + kind + ":";
                        node.style.color = "black"
                        para.appendChild(node);
                        node.style.width = '300px';

                        var node = document.createElement("label")
                        node.id = "total" + kind;
                        node.innerHTML = num + "人" + "&nbsp&nbsp&nbsp&nbsp&nbsp"
                        node.style.color = "red"
                        node.style.title = "" + num;

                        para.appendChild(node);



                        var node1 = document.createElement("label")
                        node1.innerHTML = "" + roomid + "&nbsp";
                        node1.style.color = "green"
                        para.appendChild(node1);

                        var node = document.createElement("label")
                        node.id = "" + kind + roomid;

                        node.innerHTML = num + "人" + "&nbsp&nbsp&nbsp&nbsp&nbsp"
                        node.style.color = "blueviolet"
                        para.appendChild(node);

                        var element = document.getElementById("xxx");
                        element.appendChild(para);

                    } else {

                        var total1 = "total" + kind;
                        var totalNUM = document.getElementById(total1)


                        var all = parseInt(totalNUM.style.title) + num;

                        totalNUM.innerHTML = all + "人" + "&nbsp&nbsp&nbsp&nbsp&nbsp";
                        totalNUM.style.title = "" + all;

                        var roomid2 = "p" + nameID;
                        var para = document.getElementById(roomid2)

                        var node1 = document.createElement("label")
                            //node1.id = "" + kind + roomid;
                        node1.innerHTML = "" + roomid;
                        node1.style.color = "green"
                        para.appendChild(node1);

                        var node = document.createElement("label")
                        node.id = "" + kind + roomid;;
                        node.innerHTML = num + "人" + "&nbsp&nbsp&nbsp&nbsp&nbsp"
                        node.style.color = "blueviolet"
                        para.appendChild(node);

                        var element = document.getElementById("xxx");
                        element.appendChild(para);


                    }

                });

                document.getElementById("totalamount").innerHTML = total;


            } else {
                alert(JSON.stringify(out.msg))
            }
        }, "json");

        return false
    }

    //图表
    // 基于准备好的dom，初始化echarts实例

    var myChart = echarts.init(document.getElementById('main'));

    //updateChart()
    // 指定图表的配置项和数据
    function updateChart() {

        var dateList = dataChart.map(function(item) {
            return item[0];
        });
        var valueList = dataChart.map(function(item) {
            return item[1];
        });

        var option = {

            title: {
                text: '用户在线统计'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['在线人数']
            },
            grid: {
                left: '0.5%',
                right: '5.1%',
                bottom: '0%',

                containLabel: true

            },
            toolbox: {
                feature: {
                    saveAsImage: {},
                    magicType: {
                        type: ['line', 'bar']
                    },
                }
            },
            xAxis: {
                boundaryGap: false,
                data: dateList,
                axisLabel: {
                    rotate: 45, //刻度旋转45度角
                    textStyle: {
                        //color: "blue ",
                        fontSize: 12
                    }
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '在线人数',
                type: 'line',
                stack: '总量',
                data: valueList,
                smooth: true,
                markPoint: {
                    data: [{
                        type: 'max',
                        name: '最大值'
                    }, {
                        type: 'min',
                        name: '最小值'
                    }]
                },
                markLine: {
                    data: [{
                        type: 'average',
                        name: '平均值',

                    }]
                }
            }]
        };

        myChart.setOption(option);

        // 使用刚指定的配置项和数据显示图表。
    }
</script>
</body>

</html>